import { Tabs, Form, Button, Input, DatePicker, Radio, Space } from "antd";
import CommonPage from "@/components/page/CommonPage";
import styled from "styled-components";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useRef, useState } from "react";
import dayjs from "dayjs";
import UploadOne from "@/components/upload/UploadOne";
import useMyContext from "@/hooks/useContext";
import { updateBlogConfig } from "@/api/blogconfig";
import action from "@/store/action";

const Styled = styled.div``;

const WebSite = () => {
  const dispath = useDispatch();
  const { messageApi } = useMyContext();
  const { blogConfig } = useSelector((state) => state.app);
  const [formRef] = Form.useForm();
  const [form, setForm] = useState(blogConfig);
  const [curTab, setCurTab] = useState("website");

  function UpdateForm(nVal) {
    setForm({ ...form, ...nVal });
  }

  async function handleSave() {
    try {
      await formRef.validateFields();
      const val = form; //使用自己的表单收集的数据
      await updateBlogConfig(val);
      messageApi.success("数据保存成功");
      //重新加载博客信息
      await dispath(action.app.getBlogInfo());
    } catch (error) {
      messageApi.error("数据出错");
    }
  }

  const onTabChange = (key) => {
    setCurTab(key);
  };
  useEffect(() => {
    // console.log(form);
  });
  const items = [
    {
      key: "website",
      label: "网站信息",
      children: (
        <Form
          form={formRef}
          name="website"
          labelAlign="left"
          labelCol={{
            span: 3,
          }}
          wrapperCol={{
            span: 10,
          }}
          initialValues={{
            ...blogConfig,
            website_createtime: dayjs(form.website_createtime, "YYYY-MM-DD"),
          }}
        >
          <Form.Item label="网站头像" name="website_avatar">
            <UploadOne
              width={120}
              preview={form.website_avatar}
              UpdateFormModel={UpdateForm}
            />
          </Form.Item>
          <Form.Item label="网站名称" name="website_name">
            <Input
              placeholder="请输入网址名称"
              onChange={(val) => {
                UpdateForm({ website_name: val.target.value });
              }}
            />
          </Form.Item>
          <Form.Item label="网站作者" name="website_author">
            <Input
              placeholder="请输入网站作者"
              onChange={(val) => {
                UpdateForm({ website_author: val.target.value });
              }}
            />
          </Form.Item>
          <Form.Item label="网站简介" name="website_intro">
            <Input
              placeholder="请输入网站简介"
              onChange={(val) => {
                UpdateForm({ website_intro: val.target.value });
              }}
            />
          </Form.Item>
          <Form.Item label="网站创建日期" name="website_createtime">
            <DatePicker
              format={"YYYY-MM-DD"}
              onChange={(val) => {
                const fmtTime = dayjs(val).format("YYYY-MM-DD");
                UpdateForm({
                  website_createtime: fmtTime,
                });
              }}
            />
          </Form.Item>
          <Form.Item label="网站公告" name="website_notice">
            <Input.TextArea
              type="textarea"
              rows={4}
              placeholder="请输入网站简介"
              onChange={(val) => {
                UpdateForm({ website_notice: val.target.value });
              }}
            />
          </Form.Item>
          <Form.Item label="网站备案号" name="website_record">
            <Input
              placeholder="请输入网站简介"
              onChange={(val) => {
                UpdateForm({ website_record: val.target.value });
              }}
            />
          </Form.Item>
          <Form.Item>
            <Button onClick={handleSave}>确认</Button>
          </Form.Item>
        </Form>
      ),
    },
    {
      key: "contact",
      label: "社交信息",
      children: (
        <Form
          form={formRef}
          name="contact"
          labelAlign="left"
          labelCol={{
            span: 3,
          }}
          wrapperCol={{
            span: 10,
          }}
          initialValues={{
            ...blogConfig,
          }}
        >
          <Form.Item label="QQ" name="qq">
            <Input
              placeholder="请输入QQ"
              onChange={(val) => {
                UpdateForm({ qq: val.target.value });
              }}
            />
          </Form.Item>
          <Form.Item label="Github" name="github">
            <Input
              placeholder="请输入github"
              onChange={(val) => {
                UpdateForm({ github: val.target.value });
              }}
            />
          </Form.Item>{" "}
          <Form.Item label="Gitee" name="gitee">
            <Input
              placeholder="请输入gitee"
              onChange={(val) => {
                UpdateForm({ gitee: val.target.value });
              }}
            />
          </Form.Item>
          <Form.Item>
            <Button onClick={handleSave}>确认</Button>
          </Form.Item>
        </Form>
      ),
    },
    {
      key: "other",
      label: "其他设置",
      children: (
        <Form
          form={formRef}
          name="other"
          layout="vertical"
          initialValues={{
            ...blogConfig,
            website_createtime: dayjs(form.website_createtime, "YYYY-MM-DD"),
          }}
        >
          <Form.Item>
            <Space>
              <Form.Item label="用户头像" name="user_avatar">
                <UploadOne
                  width={120}
                  preview={form.user_avatar}
                  UpdateFormModel={UpdateForm}
                />
              </Form.Item>
              <Form.Item label="游客头像" name="tourist_avatar">
                <UploadOne
                  width={120}
                  preview={form.tourist_avatar}
                  UpdateFormModel={UpdateForm}
                />
              </Form.Item>
            </Space>
          </Form.Item>
          <Form.Item label="文章默认封面" name="article_cover">
            <UploadOne
              width={300}
              preview={form.article_cover}
              UpdateFormModel={UpdateForm}
            />
          </Form.Item>
          <Form.Item label="评论默认审核" name="is_comment_review">
            <Radio.Group
              onChange={(e) => {
                UpdateForm({
                  ...form,
                  is_comment_review: e.target.value,
                });
              }}
            >
              <Radio value={0}>关闭</Radio>
              <Radio value={1}>开启</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="留言默认审核" name="is_message_review">
            <Radio.Group
              onChange={(e) => {
                UpdateForm({
                  ...form,
                  is_message_review: e.target.value,
                });
              }}
            >
              <Radio value={0}>关闭</Radio>
              <Radio value={1}>开启</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="邮箱通知" name="is_email_notice">
            <Radio.Group
              onChange={(e) => {
                UpdateForm({
                  ...form,
                  is_email_notice: e.target.value,
                });
              }}
            >
              <Radio value={0}>关闭</Radio>
              <Radio value={1}>开启</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item>
            <Button onClick={handleSave}>确认</Button>
          </Form.Item>
        </Form>
      ),
    },
  ];
  return (
    <Styled>
      <CommonPage showHeader={false}>
        <Tabs onChange={onTabChange} items={items} />
      </CommonPage>
    </Styled>
  );
};

export default WebSite;
